{% extends theme_path('admin/base.html') %}

{% block title %}文章路由设置{% endblock %}

{% block content %}
<div class="p-6">
    <div class="bg-white rounded-lg shadow-sm">
        <!-- Tab 导航 -->
        <div class="px-6 py-4 border-b">
            <div class="flex flex-col lg:flex-row justify-between items-stretch lg:items-center space-y-4 lg:space-y-0">
                <div class="flex space-x-4">
                    <a href="{{ url_for('admin.routes', tab='routes') }}" 
                       class="px-3 py-2 font-medium rounded-md text-gray-600 hover:text-gray-900">
                        路由管理
                    </a>
                    <a href="{{ url_for('admin.routes', tab='article_url') }}"
                       class="px-3 py-2 font-medium rounded-md bg-blue-100 text-blue-700">
                        文章路由设置
                    </a>
                </div>
            </div>
        </div>

        <!-- 文章 URL 配置内容 -->
        <div class="p-6">
            <!-- 当前模式显示 -->
            <div class="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
                <div class="text-sm text-gray-600">当前文章URL模式:</div>
                <div class="mt-1 font-mono text-blue-600">{{ current_pattern }}</div>
            </div>

            <form id="urlConfigForm" class="space-y-8">
                <div class="space-y-6">
                    <!-- 预设模式选择 -->
                    <div class="bg-white rounded-lg border border-gray-200 divide-y">
                        <!-- 默认模式 -->
                        <label class="flex items-start p-4 hover:bg-gray-50 cursor-pointer transition-colors duration-200">
                            <input type="radio" name="pattern_type" value="default" 
                                   class="mt-1 form-radio text-blue-600" {% if current_pattern == 'article/{id}' %}checked{% endif %}>
                            <div class="ml-3 flex-1">
                                <span class="block font-medium text-gray-900">默认模式</span>
                                <span class="block mt-1 text-sm text-gray-500">article/{id}</span>
                                <span class="mt-2 inline-flex items-center px-2 py-1 rounded-md text-xs font-medium bg-blue-100 text-blue-800">
                                    推荐
                                </span>
                            </div>
                        </label>
                        
                        <!-- 日期模式 -->
                        <label class="flex items-start p-4 hover:bg-gray-50 cursor-pointer transition-colors duration-200">
                            <input type="radio" name="pattern_type" value="date" 
                                   class="mt-1 form-radio text-blue-600" {% if current_pattern == '{year}/{month}/{day}/{id}' %}checked{% endif %}>
                            <div class="ml-3 flex-1">
                                <span class="block font-medium text-gray-900">日期模式</span>
                                <span class="block mt-1 text-sm text-gray-500">{year}/{month}/{day}/{id}</span>
                                <div class="mt-2 text-xs text-gray-500">适合按时间归档的博客</div>
                            </div>
                        </label>
                        
                        <!-- 分类模式 -->
                        <label class="flex items-start p-4 hover:bg-gray-50 cursor-pointer transition-colors duration-200">
                            <input type="radio" name="pattern_type" value="category" 
                                   class="mt-1 form-radio text-blue-600" {% if current_pattern == '{category}/{id}' %}checked{% endif %}>
                            <div class="ml-3 flex-1">
                                <span class="block font-medium text-gray-900">分类模式</span>
                                <span class="block mt-1 text-sm text-gray-500">{category}/{id}</span>
                                <div class="mt-2 text-xs text-gray-500">适合内容分类明确的网站</div>
                            </div>
                        </label>
                        
                        <!-- 加密模式 -->
                        <label class="flex items-start p-4 hover:bg-gray-50 cursor-pointer transition-colors duration-200">
                            <input type="radio" name="pattern_type" value="encode" 
                                   class="mt-1 form-radio text-blue-600" {% if current_pattern == 'p/{encodeid}' %}checked{% endif %}>
                            <div class="ml-3 flex-1">
                                <span class="block font-medium text-gray-900">加密模式</span>
                                <span class="block mt-1 text-sm text-gray-500">p/{encodeid}</span>
                                <div class="mt-2 text-xs text-gray-500">使用加密的文章ID，更安全美观</div>
                                
                                <!-- 加密设置 -->
                                <div class="mt-3 {% if current_pattern != 'p/{encodeid}' %}hidden{% endif %}" id="encodeSettings">
                                    <div class="space-y-3">
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">加密密钥</label>
                                            <input type="text" name="encode_salt" 
                                                   class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
                                                   value="{{ site_config.get_config('article_id_salt', '') }}"
                                                   placeholder="设置一个密钥增加安全性">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium text-gray-700">ID长度</label>
                                            <select name="encode_length" 
                                                    class="mt-1 w-full px-3 py-2 border border-gray-300 rounded-md text-sm">
                                                <option value="6" {% if site_config.get_config('article_id_length') == '6' %}selected{% endif %}>6位</option>
                                                <option value="8" {% if site_config.get_config('article_id_length', '8') == '8' %}selected{% endif %}>8位</option>
                                                <option value="10" {% if site_config.get_config('article_id_length') == '10' %}selected{% endif %}>10位</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </label>

                        <!-- 添加 archives 模式选项 -->
                        <label class="flex items-start p-4 hover:bg-gray-50 cursor-pointer transition-colors duration-200">
                            <input type="radio" name="pattern_type" value="archives"
                                   class="mt-1 form-radio text-blue-600" {% if current_pattern == 'archives/{slug}' %}checked{% endif %}>
                            <div class="ml-3 flex-1">
                                <span class="block font-medium text-gray-900">别名模式</span>
                                <span class="block mt-1 text-sm text-gray-500">archives/{slug}</span>
                                <div class="mt-2 text-xs text-gray-500">使用文章别名生成友好的URL</div>
                            </div>
                        </label>
                        
                        <!-- 自定义模式 -->
                        <label class="flex items-start p-4 hover:bg-gray-50 cursor-pointer transition-colors duration-200">
                            <input type="radio" name="pattern_type" value="custom" 
                                   class="mt-1 form-radio text-blue-600" {% if is_custom_pattern %}checked{% endif %}>
                            <div class="ml-3 flex-1">
                                <span class="block font-medium text-gray-900">自定义模式</span>
                                <input type="text" name="custom_pattern" 
                                       class="mt-2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100 disabled:text-gray-500"
                                       placeholder="blog/{year}/{category}/{id}"
                                       value="{{ current_pattern if is_custom_pattern else '' }}"
                                       {% if not is_custom_pattern %}disabled{% endif %}>
                                <div class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded-md">
                                    <div class="flex">
                                        <div class="flex-shrink-0">
                                            <svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                            </svg>
                                        </div>
                                        <div class="ml-3">
                                            <h3 class="text-sm font-medium text-yellow-800">可用变量说明</h3>
                                            <div class="mt-2 text-sm text-yellow-700">
                                                <ul class="list-disc pl-5 space-y-1">
                                                    <li>{id} - 文章ID</li>
                                                    <li>{encodeid} - 加密后的文章ID</li>
                                                    <li>{category} - 分类名称或别名</li>
                                                    <li>{year} - 发布年份</li>
                                                    <li>{month} - 发布月份</li>
                                                    <li>{day} - 发布日期</li>
                                                    <li>{slug} - 文章URL别名</li>
                                                </ul>
                                                <p class="mt-2">注意：开头不要带 /，不能双id共存，不能加密id和真实id一起放</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </label>
                        

                    </div>
                </div>
                
                <div class="pt-6 border-t flex justify-end">
                    <button type="submit" 
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200 flex items-center">
                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        保存设置
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// 处理模式切换
document.querySelectorAll('input[name="pattern_type"]').forEach(radio => {
    radio.addEventListener('change', function() {
        // 处理自定义模式输入框
        const customInput = document.querySelector('input[name="custom_pattern"]');
        customInput.disabled = this.value !== 'custom';
        if (this.value === 'custom' && !customInput.value) {
            customInput.focus();
        }
        
        // 处理加密设置面板
        const encodeSettings = document.getElementById('encodeSettings');
        if (encodeSettings) {
            encodeSettings.classList.toggle('hidden', this.value !== 'encode');
        }
    });
});

// 处理表单提交
document.getElementById('urlConfigForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = {
        pattern_type: formData.get('pattern_type'),
        custom_pattern: formData.get('custom_pattern'),
        encode_settings: {
            salt: formData.get('encode_salt'),
            length: formData.get('encode_length')
        }
    };
    
    const submitButton = this.querySelector('button[type="submit"]');
    submitButton.disabled = true;
    submitButton.innerHTML = '<svg class="w-4 h-4 mr-2 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>保存中...';
    
    fetch('{{ admin_url }}/article-url-config', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            showAlert(data.error, 'error', '错误');
        } else {
            showAlert(data.message, 'success', '成功');
            setTimeout(() => location.reload(), 1000);
        }
    })
    .finally(() => {
        submitButton.disabled = false;
        submitButton.innerHTML = '<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>保存设置';
    });
});
</script>
{% endblock %} 